<style lang="scss">
  @import "../utils/base.scss";

  td.ivu-table-expanded-cell {
    background-color: #ffffff;
  }
</style>
<template>
  <div style="height:calc(100vh - 94px);background-color:#FFFFFF;overflow-y:auto;overflow-x:hidden;">
    <div class="qheader">
      <p>负载均衡管理</p>
    </div>
    <div class="gcontent">
      <Form :model="searchInfo" :label-width="100" label-position="left"
        style="position:relative;left:4%;padding-bottom: 10px">
        <Row>
          <Col span="8">
          <FormItem label="姓名:">
            <Input v-model="searchInfo.userName" style="width:70%" />
          </FormItem>
          </Col>
          <Col span="8">
          <FormItem label="一级4A主账号:">
            <Input v-model="searchInfo.fourA" style="width:70%" />
          </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="8">
          <FormItem label="资源池:">
            <Input v-model="searchInfo.oriPool" style="width:70%" />
          </FormItem>
          </Col>
          <Col span="8">
          <FormItem label="策略类型:">
            <Input v-model="searchInfo.balanceType" style="width:70%" />
          </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="8">
          <FormItem label="工单号:">
            <Input v-model="searchInfo.reqId" style="width:70%" />
          </FormItem>
          </Col>
          <Col span="8">
          <FormItem label="工单标题:">
            <Input v-model="searchInfo.reqSubject" style="width:70%" />
          </FormItem>
          </Col>

        </Row>
        <Row>
          <Col span="10">
          <FormItem label="策略申请日期:">
            <DatePicker :options="disabledDate" v-model="startDate" type="date" placeholder="Select date"
              style="width:38%" @on-change="startDateFormat"></DatePicker>
            <span>-</span>
            <DatePicker :options="disabledDate" v-model="endDate" type="date" placeholder="Select date"
              style="width:38%" @on-change="endDateFormat"></DatePicker>
          </FormItem>
          </Col>
          <Col span="14" style="text-align: center;">
          <Button type="primary" style="width:5vw;" @click="search(searchInfo.current)">查找</Button>
          </Col>
        </Row>
        <Row>
          <Col span="22" style="width: 92.3%;">
          <Table border :columns="columns" :data="netInfo" max-height="300">
            <template slot-scope="{row, index}" slot="action">
              <Button type="primary" @click="toPage(row)">详情</Button>
            </template>
          </Table>
          <div style="margin: 10px;overflow: hidden">
            <div style="float: right;">
              <Page :current="searchInfo.current" :total=total show-total show-elevator show-sizer @on-change="search"
                @on-page-size-change="changePageSize"></Page>
            </div>
          </div>
          </Col>
        </Row>
      </Form>
    </div>
  </div>
</template>
<script>
  import ajax from "../ajax_util"
  import Axios from 'axios'
  //import expandRow from './process_netManager_expand';

  export default {
    components: {
      //expandRow
    },
    data() {
      return {
        disabledDate: {
          disabledDate(date) {
            return date && date.valueOf() > 4070880000000;
          }
        },
        columns: [
          // {
          //     type: 'expand',
          //     width: 50,
          //     render: (h, params) => {
          //         return h(expandRow, {
          //             props: {
          //                 row: params.row
          //             }
          //         })
          //     }
          // },
          {
            title: '姓名',
            key: 'userName'
          },
          {
            title: '一级4A主账号',
            key: 'fourA'
          },
          {
            title: '源资源池',
            key: 'oriPool'
          },
          {
            title: '目的资源池',
            key: 'tarPool'
          },
          {
            title: '策略类型',
            key: 'balanceType'
          },
          {
            title: '策略申请日期',
            key: 'startDate'
          },
          {
            title: '工单号',
            key: 'reqId'
          },
          {
            title: '工单标题',
            key: 'reqSubject'
          },
          {
            title: '操作',
            width: '80',
            slot: 'action'
          }
        ],
        startDate: "",
        endDate: "",
        searchInfo: {
          userName: "",
          fourA: "",
          oriPool: "",
          balanceType: "",
          startTime: "",
          hopeTime: "",
          reqId: "",
          current: 1,
          pageSize: 10,
          reqSubject: ""
        },
        netInfo: [],
        tabs: {},
        total: 0
      }
    },
    computed: {
      isEdit() {
        return this.$store.state.tabs.isEdit
      }
    },
    mounted: function() {
      this.tabs = this.$store.state.tabs;
      //console.log("------this.tabs----",this.tabs);
    },
    methods: {
      search(page) {
        this.searchInfo.current = page;
        //console.log("-----page------",page);
        console.log('search', this.searchInfo)
        this.people = [];
        var that = this;
        var url = this.CONFIG.progress_url + '/load-balance-manager';
        ajax.get({
          url: url,
          that: that,
          params: that.searchInfo,
          success: function(data) {
            console.log("-----data------", data);
            that.total = data.total;
            that.getData(data.records);
          }
        })
      },
      changePageSize(pageSize) {
        this.searchInfo.pageSize = pageSize;
        this.search(this.searchInfo.current);
      },
      getData(data) {
        for (var i = 0; i < data.length; i++) {
          if (data[i].startTime != null && data[i].startTime != undefined) {
            data[i].startDate = this.timeFormat(data[i].startTime);
          }

          if (data[i].hopeTime != null && data[i].hopeTime != undefined) {
            data[i].hopeData = this.timeFormat(data[i].hopeTime);
          }

          if (data[i].actTime != null && data[i].actTime != undefined) {
            data[i].actDate = this.timeFormat(data[i].actTime);
          }

          if (data[i].deadline != null && data[i].deadline != undefined) {
            data[i].deadlineDate = this.timeFormat(data[i].deadline);
          }
        }
        this.netInfo = data;
        //console.log("=====this.netInfo=======",this.netInfo);
      },
      timeFormat(time) {
        if (time == 0) {
          return "";
        } else {
          var date = new Date(time * 1000);
          var year = date.getFullYear();
          var month = date.getMonth() + 1;
          var day = date.getDate();
          return year + "-" + month + "-" + day;
        }

      },
      startDateFormat(data) {
        this.searchInfo.startTime = "";
        //console.log("----------",data);
        if (data != "" && data != null) {
          var temp = data + " 00:00:00"
          var date = new Date(temp);
          var startTime = (date.getTime() / 1000);
          this.searchInfo.startTime = startTime + "";
        }
        //console.log("-----this.searchInfo.startTime-----",this.searchInfo.startTime);
      },
      endDateFormat(data) {
        this.searchInfo.hopeTime = "";
        if (data != "" && data != null) {
          var temp = data + " 23:59:59"
          var date = new Date(temp);
          var hopeTime = (date.getTime() / 1000);
          this.searchInfo.hopeTime = hopeTime;
        }
        //console.log("-----deadline-----",this.searchInfo.deadline);
      },

      toPage(row) {
        //console.log("----row--------",row);
        var isName = false
        var key = ""
        if (row.task_def_key != null) {
          key = row.reqId + row.task_def_key
        } else {
          key = row.reqId + ''
        }
        this.tabs.list.some(item => {
          if (item.tabKey === key) {
            isName = true
            return
          }
        })
        if (!isName) {
          this.tabs.list.push({
            title: "工单详情 / 负载均衡",
            key: "handle",
            tabKey: key,
            params: {
              serviceType: row.serviceType,
              reqId: row.reqId,
              status: this.clickid,
              taskDefKey: row.task_def_key
            }
          })
        }
        this.tabs.isEdit = ""
        this.tabs.lastPage = this.tabs.tabsPage
        this.tabs.tabsPage = key
        this.$store.commit("tabs", this.tabs);
      }
    }
  }
</script>
